<template>
  <div class="personal">
    <el-row style="height: 100%;" class="index_box">
      <el-col :span="18" class="left-column" style="margin-right: 10px;;">
        <el-row style="height: 100%;display: flex;flex-direction: column;">
          <el-col :span="24" class="left-top" style="height:80%;margin-bottom: 10px;">
            <LeftTop />
          </el-col>
          <el-col :span="24" class="left-bottom"  style="flex:1;  ">
            <LeftBottom />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" class="right-column" >
        <RightColumn />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LeftTop from '@/components/person/LeftTop.vue';
import LeftBottom from '@/components/person/LeftBottom.vue';
import RightColumn from '@/components/person/RightColumn.vue';

export default {
  name: 'PersonalPage',
  components: {
    LeftTop,
    LeftBottom,
    RightColumn,
  },
};
</script>

<style scoped>
.index_box {
  height: 100%;
  display: flex;
}
.right-column{
  flex: 1;
}

.personal {
  height: 100%;
}

.left-column {
  
}
</style>
